<template>
    <div>
        <el-card
            shadow="always"
            style="height: 481px;margin-top: 10px;"
        >
            <div class="body-purse">
                <div class="top">钱包余额</div>
                <div class="center">
                    <div>￥0.00</div>
                    <el-button
                        type="danger"
                        size="default"
                    >提现</el-button>
                </div>

                <div class="buttom">
                    <el-icon>
                        <Phone />
                    </el-icon>
                    联系客服
                </div>
            </div>
        </el-card>

        <el-card shadow="always">
            <div slot="header">
                <span class="span">
                    <span>钱包明细</span>
                    <el-icon>
                        <InfoFilled/>
                    </el-icon>
                </span>
            </div>
            <div class="number">暂无数据</div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Phone,
    InfoFilled
} from '@element-plus/icons-vue'
</script>

<style scoped>
.body-purse {
    width: 100%;
    height: 461px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.body-purse .top {
    font-size: 16px;
}

.body-purse .center {
    font-size: 32px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.body-purse .center button {
    background-color: #fc9bc2;
    width: 180px;
    height: 50px;
    margin-top: 80px;
}

.body-purse .buttom {
    font-size: 14px;
}

.span{
    height: 40px;
    display: flex;
    justify-content: flex-start;
}
.span span{
    margin-right: 10px;
}
.number{
    height: 56px;
    text-align: center;
    line-height: 56px;
}
</style>